<template>
	<view class="pay-success">
	    <view class="topTitle">
	        <view>Hi，</view>
	        <view>欢迎使用{{plat_name}}</view>
	    </view>
	    <view class="loginImage">
	        <image mode="aspectFill" class="loginBg" src="/static/loginBg.png"></image>
	    </view>
	    <view class="login">
	        <view class="protocol flex_conter_c">
				<u-checkbox v-model="checked" active-color="#fe0000">同意<text>《隐私协议》</text></u-checkbox>
	        </view>
	        <view class="btnBox">
	            <!-- <view class="mask"></view> -->
	            <button class="wancheng tc" v-if="xcx_auth == '0'" @click="getUserProfile">微信授权登陆</button>
	            <button class="wancheng tc" v-if="xcx_auth == '1'" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登陆</button>
	        </view>
	
	        <view class="home" @click="goHome">暂不登陆，去首页</view>
	    </view>
	
	    <view class="popup" v-if="show_auth_phone">
	        <view class="mask" catchtouchmove="ture"></view>
	        <view class="card">
	            <view class="title">微信授权</view>
	            <view class="content">
	                <view class="logoBox">
	                    <image mode="aspectFill" class="logo" src="/static/logo.png"></image>
	                </view>
	                <view class="obtain">{{plat_name}} 申请获得以下权限</view>
	                <view class="permissionList">
	                    <view class="permission">
	                        <view class="label">申请获取你微信绑定的手机号</view>
	                    </view>
	                </view>
	            </view>
	            <view class="btnBox flex_conter">
	                <button class="btn" size="mini" hover-class="btnHover" @click="colse_auth_phone">拒绝</button>
	                <button class="btn" size="mini" hover-class="btnHover" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"  @click="colse_auth_phone">允许</button>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script>
	
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				checked: true,
				xcx_auth:0,
				openId:"",
				show_auth_phone:false,
				plat_name:uni.getStorageSync('xixuan_plat_name')
			}
		},
		onLoad() {
			this.xcx_auth = wx.getStorageSync("xixuan_pintuan_auth");
			this.openId = wx.getStorageSync("xixuan_pintuan_openid");
		},
		methods: {
			getUserInfo: function (e) {
				
				var that = this;
				const detail = e.detail;
				if (detail.errMsg == 'getUserInfo:ok') {
		
				  wx.login({
					success:function(res){
		
					  let data = {
						"encryptedData":detail.encryptedData,
						"iv":detail.iv,
						"code":res.code,
					  };
					  util.requestPost(
						'api.php/login/wechatXcxAuthUserInfo',
						data,
						function(res){
						  uni.setStorageSync('xixuan_pintuan_auth', '1');
						  that.xixuan_pintuan_auth = '1';
						  that.show_auth_phone = true;
						},
						true
					  );
		
					},
					fail:function(){
					  util.toast("授权失败，请返回重试！");
					}
				  });
				  
				}else{
				  util.toast("您取消了授权！");
				}
			},
			getUserProfile: function(e) {
				let that = this;
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: (rs) => {
						let data = rs.userInfo;
						data['openId'] = that.openId;
						util.requestPost(
							'api.php/login/wechatXcxAuthUserInfo2',
							data,
							function(res) {
								uni.setStorageSync('xixuan_pintuan_auth', '1');
								that.xixuan_pintuan_auth = '1';
								that.show_auth_phone = true;
							},
							true
						);
					},
					fail: (e) => {
						console.log(e);
						util.toast(e);
					}
				});
			},
			getPhoneNumber:function(e) {
				var that = this;
			  
				const detail = e.detail;
			
				if (detail.errMsg == 'getPhoneNumber:ok') {
		
				  uni.login({
					success:function(res){
					  let data = {
						"encryptedData":detail.encryptedData,
						"iv":detail.iv,
						"code":res.code,
						"openId":that.openId,
						"share_openid":uni.getStorageSync("xixuan_pintuan_share_r_openid") || '',
						"share_uid":uni.getStorageSync("xixuan_pintuan_share_r_uid") || 0,
					  };
					  util.requestPost(
						'api.php/login/wechatXcxAuthUserPhone',
						data,
						function(res){
							uni.setStorageSync('xixuan_pintuan_auth', '2');
							that.xixuan_pintuan_auth = '2';
							uni.navigateBack();
						},
						true
					  );
		
					},
					fail:function(e){
					  util.toast("授权失败，请返回重试！");
					}
				  });
				  
				}else{
				  util.toast("您取消了授权！");
				}
			},
			colse_auth_phone(){
				this.show_auth_phone = false;
			},
			goHome(){
				uni.reLaunch({
					url:'/pages/index/index'
				});
			}
		}
	}
</script>

<style scoped>
page {
    background: #fff;
    height: 100%;
}
.pay-success {
    padding: 0 32rpx;
    height: 100%;
    position: relative;
}

.success {
    padding: 140rpx 20%;
}
.login .wancheng.tc {
    width: 100%;
    border-radius: 50rpx;
    background: var(--primaryColor);
    color: #fff;
    font-size: 32rpx;
    margin: 32rpx 0;
}
.login .wancheng::after {
    border: 0;
}

.topTitle {
    padding-top: 32rpx;
    color: #666666;
}
.topTitle view:first-of-type {
    font-size: 48rpx;
    font-weight: 600;
}
.topTitle view:last-of-type {
    margin-top: 12rpx;
    font-size: 36rpx;
}

.loginImage {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
}
.loginImage .loginBg {
    width: 678rpx;
    height: 408rpx;
}

.login {
    position: absolute;
    bottom: 30rpx;
    left: 0;
    right: 0;
    padding: 0 32rpx;
}

.login .home {
    color: var(--primaryColor);
    font-size: 28rpx;
    text-align: center;
    margin: 20rpx 0 32rpx;
    text-decoration: underline;
}

.protocolBox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.protocolText {
    font-size: 28rpx;
    color: #666666;
}
.protocolText text{
    color: var(--primaryColor);
}

.btnBox {
    position: relative;
}
.btnBox .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.popup .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2100;
    background: rgba(0, 0, 0, 0.6);
}
.popup .card {
    width: 650rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3000;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 12rpx;
    overflow: hidden;
}
.popup .card .title {
    font-size: 34rpx;
    font-weight: 600;
    text-align: center;
    padding: 28rpx;
    border-bottom: 1rpx solid #eeeeee;
}
.popup .card .content {
    padding: 0 40rpx;
    border-bottom: 1rpx solid #eeeeee;
}
.popup .card .content .logoBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20rpx 0;
}
.popup .card .content .logo {
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
}
.popup .card .content .obtain {
    font-size: 34rpx;
    color: #333333;
    margin-bottom: 32rpx;
}
.popup .card .content .permissionList {
    margin-bottom: 52rpx;
}
.popup .card .content .permissionList .permission {
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 12rpx;
}
.popup .card .content .permissionList .permission .label {
    padding-left: 20rpx;
    position: relative;
}
.popup .card .content .permissionList .permission .label::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 12rpx;
    height: 12rpx;
    border-radius: 6rpx;
    background: #999999;
}
.popup .card .btnBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.popup .card .btnBox .btn {
    flex: 1;
    border-radius: 0;
    padding: 20rpx 24px;
    background: #ffffff;
	font-size: 28rpx;
	border: none;
}
.popup .card .btnBox .btn:first-of-type {
    border-right: 1rpx solid #eeeeee;
}
.popup .card .btnBox .btn:last-of-type {
    color: #576B95;
}
.popup .card .btnBox .btn.btnHover {
    background-color: #eeeeee;
}

uni-button:after {
    content: " ";
    border: none;
    border-radius: 0;
}
</style>
